import { useState } from "react";
import { useTranslation } from 'react-i18next'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import MyTextField from '@/components/MyForm/MyTextField'
import Remote from '@/components/MyForm/Remote'
import Dictionary from '@/components/MyForm/Dictionary'
import { Button } from '@mui/material'
import UppyDialog from "./UppyDialog";

const HomePage = () => {
  const {t} = useTranslation()
  const [initialForm] = useState({
    stringValue: '',
    remoteId: undefined,
    code: null
  })
  const [textState, setTextState] = useState('')
  const actionForm = (values, action) => {
    action.setSubmitting(false)
  }
  const formValidate = (values) => {
    const errors = {}
    if (!values.stringValue) {
      errors.stringValue = 'please input'
    }
    if (!values.remoteId) {
      errors.remoteId = 'please select'
    }
    if (!values.code) {
      errors.code = 'please select'
    }
    return errors
  }
  const getRemoteOptions = (name) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        let options = [
          { id: '111', name: 'name1' },
          { id: '222', name: 'name2' },
          { id: '333', name: 'arr2' },
          { id: '444', name: 'arrg6' }
        ]
        if (name) {
          options = options.filter(item => {
            return item.name.indexOf(name) >= 0
          })
        }
        resolve(options)
      }, 2000)
    })
  }
  const getDictionaryOptions = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        let options = [
          { id: '111', name: 'name1' },
          { id: '222', name: 'name2' },
          { id: '333', name: 'arr2' },
          { id: '444', name: 'arrg6' },
          { id: '555', name: 'arrg6777' }
        ]
        resolve(options)
      }, 2000)
    })
  }
  const changeCompState = () => {
    setTextState(new Date().getTime().toString())
  }

  const [dialogOpen, setDialogOpen] = useState(false)
  const dialogCloseFunc = () => {
    setDialogOpen(false)
  }
  return (
    <div style={{width: '100%', height: '100%'}} className="home_page">
      首页
      {textState}
      <Button onClick={() => {changeCompState()}}>点击</Button>
      <div>
        {t('test.testLanguage')}
      </div>
      <p>测试表单</p>
      <div>
        <Formik initialValues={initialForm} onSubmit={(values, actions) => actionForm(values, actions)} validate={(values) => formValidate(values)}>
          {({isSubmitting, values, setFieldValue}) => (
            <Form className="MyForm">
              <div className="formItem">
                <Field style={{width: '100%'}} name="stringValue" placeholder="请输入" label="input string" component={MyTextField} />
                <ErrorMessage name="stringValue" component="div" className="errorsMsgComp" />
              </div>
              <div className="formItem">
                <Field style={{width: '100%'}} name="remoteId" placeholder="请选择" label="remote select" component={Remote} values={values} setFieldValue={setFieldValue} getOptionsFunc={getRemoteOptions} />
                <ErrorMessage name="remoteId" component="div" className="errorsMsgComp" />
              </div>
              <div className="formItem">
                <Field style={{width: '100%'}} name="code" placeholder="请选择" label="dictionary select" component={Dictionary} values={values} setFieldValue={setFieldValue} getOptionsFunc={getDictionaryOptions} />
                <ErrorMessage name="code" component="div" className="errorsMsgComp" />
              </div>
              <div>
                <Button
                  type="submit"
                  variant="contained"
                  disabled={isSubmitting}
                  >
                    提交
                </Button>
              </div>
            </Form>
          )}
        </Formik>
      </div>
      <div style={{marginTop: '20px'}}>
        <Button variant="contained" onClick={() => setDialogOpen(true)}>文件上传</Button>
      </div>
      <UppyDialog dialogOpen={dialogOpen} dialogCloseFunc={dialogCloseFunc}></UppyDialog>
    </div>
  )
}

export default HomePage